<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@include file="../base_path.jsp" %>

<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="<%=basePath%>/lib/bootstrap-select/css/bootstrap-select.min.css" />
    <link type="text/css" rel="stylesheet" href="<%=basePath%>/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css" />
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/css/pageNav.css" />
    <title>机器人监控</title>

</head>

<body>
<style type="text/css">
    .detail-left .detail-head {
        background: linear-gradient(to right, #3247c7, #3273fa);
        color: #FFF;
    }
    wave {
        background: #002138;
    }
    .detail-head button {
        margin-right: 10px;
    }
    .intention-button .btn {
        width: 100%;
        color: #3273fa;
        border-color:  #3273fa;
        border-radius: 4px;
    }

    .intention-button .btn:hover {
        background-color:  #3273fa;
        color:#FFF;
    }

    .intention-row-active .intention-button .btn {
        background-color:  #3273fa;
        color:#FFF;
    }

    .intention-row-first .rank {
        background-color: #3273fa
    }


    .message-face img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        /* background: #DDDDDD; */
    }
    .user-message .message-text {
        background: #3c8dbc;
        border-radius: 5px;
        line-height: 18px;
        font-size: 12px;
        position: relative;
        color: #FFF;
        background: #c9d8f8;
        border-color: #c9d8f8;
        color: #3273fa;
    }
    .intention-button .btn {
        white-space: normal;
        transition: 0.3s;
    }
    .phone-head .btn {
        padding: 6px 4px;
    }
    /*呼叫数据通用*/
    .bg-status {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        /*padding-top: 20px;*/
        /*padding-left: 20px;*/
        text-align: center;
        flex-direction: column;
        color: white;
    }

    .bg-status img{
        position: absolute;
        top: 50%;
        right: 10%;
        height: 32px;
        margin-top:-16px;
    }
    /*当前呼叫数据*/
    .bg-status1 {
        background-image: linear-gradient(to top,#3896ff, #3896ff,#3896ff,#b3e0fb);
        background-size: 100% 100%;
        height: 10%;
        border-radius: 4px;
        height: 70px;
    }
    /*今日呼叫数据*/
    .bg-status2 {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        /*padding-top: 20px;*/
        /*padding-left: 20px;*/
        text-align: center;
        flex-direction: column;
        color: white;
    }
    .bg-info{
        background-image: url(<%=basePath%>/assets/img/ivrImg.png);
        background-repeat: no-repeat;
        background-size:100% 100%;
        width: 100%;
    }
    .bg-info3{
        background-image: url(<%=basePath%>/assets/img/callImg.png);
        background-repeat: no-repeat;
        background-size:100% 100%;
        width: 100%;
    }
    .bg-info4{
        background-image: url(<%=basePath%>/assets/img/listenImg.png);
        background-repeat: no-repeat;
        background-size:100% 100%;
        width: 100%;
    }
    .bg-info2{
        background-image: url(<%=basePath%>/assets/img/linkImg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
    }
    .p-tit {
        font-size: 0.8rem;
        color: white;
    }
    .p-num {
        margin-bottom: 0px;
        font-size: 2rem;
        font-weight:bold ;
        color: white;
    }

    .col-style1{
        width: 100%;
        margin-bottom: 0.75rem;
    }
    .col-style2{
        height: 70px;
        padding: 10px;
    }
    /*排列间距*/
    .col-style2:nth-child(n-1){
        margin-left: 12px;
    }
    .col-style2:last-child{
        margin-right: 12px;
    }
    .col-style1:nth-child(n-1){
        margin-left: 12px;
    }
    .col-style1:last-child{
        margin-right: 12px;
    }
    .flex-bg-center:hover{
        box-shadow: 10px 10px 10px rgb(191, 191, 191);
    }
    .bg-status1:hover{
        box-shadow: 10px 10px 10px rgb(191, 191, 191);
    }
    .flex-bg{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .flex-bg-center{
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .icon-size{
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
        margin-right: 1.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-repeat: no-repeat;
    }
    .icon-call{
        background-image:  url(<%=basePath%>/assets/img/icon-call.png);;
        background-position: center center;
    }
    .icon-link{
        background-image:  url(<%=basePath%>/assets/img/icon-link.png);;
        background-position: center center;
    }
    .icon-listen{
        background-image:  url(<%=basePath%>/assets/img/icon-listen.png);;
        background-position: center center;
    }
    .icon-range{
        background-image:  url(<%=basePath%>/assets/img/icon-callrange.png);;
        background-position: center center;
    }
    #fixed-height{
        position: absolute;

        width:calc(100% - 40px);
        height:calc(100% - 350px);
        background-color: #FFFFFF;
        border-radius: 10px;
        margin:0 20px 0;
        padding: 15px;
        overflow: hidden;
    }
    #fixed-child{
        height:100%;
        position: absolute;
        width:calc(100% - 40px);
        margin-right:12px;
        overflow-y: auto;
        overflow-x: hidden;

    }
    #monitoring-height{
        padding-right:24px;
        padding-left:24px;
        position: sticky;
        top:7rem;
        z-index: 11111;
        width: 100%;
    }
    #monitoring{
        position: relative;
        flex: 1;
        height: 100%;
    }
</style>
<%--头部--%>
<div class="navbar-fixed-top">
    <div class="breadcrumb" >
            <div style="display: flex;align-items: center;justify-content: space-between" >
                <div  >
                    <span>呼入中心</span>/
                    <span class="active" style="color: #2271e2">实时监控</span>
                </div>
                <div  style="display:flex;align-items: center" >
                    <span  style="color: #3273fa;margin-left: 4px" >
               <div id="time-down"  title="实时秒"></div>
              </span>
                    <span>
           秒后再次刷新
                  </span>
                    <span class="pull-right" title="刷新">

           <div class="btn-refresh" onclick="refreshclick();" style="margin-left: 6px">
           	<img src="<%=basePath%>/images/refresh.png" >
           </div>
              </span>
                </div>
            </div>


    </div>
</div>
<%--//main--%>
<div  id="monitoring">
    <div      id="monitoring-height"  style="">
        <%--   数据 --%>
        <div class="container-fluid-main">
            <div style="display: flex;align-items: center">
                <i style="color: red;width: 5px;height: 5px;border-radius: 50%;background-color: red" ></i>
                <h5 style="margin-left: 12px">当前呼叫数据</h5>
            </div>
            <div class="row">
                <div class="flex-bg" style="font-size: 30px;">
                    <div class="col-style1" >
                        <div class="bg-status1 bg-status">
                            <p class="p-num" id="currentIncomingCalls">-</p>
                            <p class="p-tit">呼入中</p>
                        </div>
                    </div>
                    <div class=" col-style1">
                        <div class="bg-status1 bg-status">
                            <p class="p-num" id="currentRobotWaiting">-</p>
                            <p class="p-tit">机器人排队等待中
                            </p>
                        </div>
                    </div>
                    <div class="col-style1" >
                        <div class="bg-status1 bg-status">
                            <p class="p-num" id="currentRobotListening">-</p>
                            <p class="p-tit">机器人接听中
                            </p>
                        </div>
                    </div>
                    <div class=" col-style1" >
                        <div class="bg-status1 bg-status">
                            <p class="p-num" id="currentSeatWaiting">-</p>
                            <p class="p-tit">人工排队等待中</p>
                        </div>
                    </div>
                    <div class="col-style1" >
                        <div class="bg-status1 bg-status">
                            <p class="p-num" id="currentSeatListening">-</p>
                            <p class="p-tit">人工接听中</p>
                        </div>
                    </div>
                </div>

            </div>
            <div style="display: flex;align-items: center">
                <i style="color: red;width: 5px;height: 5px;border-radius: 50%;background-color: red" ></i>
                <h5 style="margin-left: 12px">今日呼叫数据</h5>
            </div>
            <div class="row">
                <div class="flex-bg" style="font-size: 30px;">
                    <div class="flex-bg-center bg-info col-style2" >
                        <div class="icon-size icon-call"></div>
                        <div class="bg-status2 ">
                            <p class="p-num" id="dailyTrafficVolume">-</p>
                            <p class="p-tit">IVR呼入量</p>
                        </div>
                    </div>
                    <div class="flex-bg-center bg-info2 col-style2" >
                        <div  class="icon-size icon-link"></div>
                        <div class="bg-status2" >
                            <p class="p-num" id="seatsEnteringTheLine">-</p>
                            <p class="p-tit">人工进线量</p>
                        </div>
                    </div>
                    <div class="flex-bg-center bg-info3 col-style2" >
                        <div  class="icon-size icon-listen"></div>
                        <div class=" bg-status2 " >
                            <p class="p-num" id="seatsListeningTheLine">-</p>
                            <p class="p-tit">人工接听量</p>
                        </div>
                    </div>
                    <div class="flex-bg-center bg-info4 col-style2" >
                        <div  class="icon-size icon-range" ></div>
                        <div class=" bg-status2" >
                            <p class="p-num" id="seatsListeningRate">-</p>
                            <p class="p-tit">人工接听率</p>
                        </div>
                    </div>




                </div>
            </div>
        </div>
    </div>
    <div id="fixed-height"  >
        <div id="fixed-child">
            <div >
                <div class="" style="border: none;">
                    <div style="display: flex;align-items: center">

                        <h5 style="margin-left: 12px">队列监控</h5>
                    </div>
                    <div>
                        <table id="monitoringJQGrid"></table>
                        <div style="height: 40px" id="monitoringJQGridPager"></div>

                    </div>
                    <div style="display: flex;align-items: center">

                        <h5 style="margin-left: 12px">人工监控</h5>
                    </div>
                    <div>
                        <table id="monitoringJQGrid2"></table>
                        <div style="height: 40px" id="monitoringJQGridPager2"></div>

                    </div>
                </div>
            </div>
        </div>


    </div>
    <%--表格数据--%>


</div>




<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=basePath%>/lib/jquery/1.11.0/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/client.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/pcm-player.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.js"></script>


<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jquery.validation/1.14.0/jquery.validate_1.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/lobibox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/messageboxes.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/notifications.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/JQuery.md5.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/pageNav.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    //打开链接
    var timeValue=$('#time-down');
    var refreshTime=15;
    var valueOfcoming= 1
    function refreshclick() {
        refreshTime=16
        // location.replace(location.href);
        refreshJQGrid()
        //此处调取实时数据方法
    }
    var num =parent.document.getElementById("iframe_box").children.length
    //做个刷新定时器
    var timer=null
    function setTime(){
        console.log(num,parent.document.getElementById("iframe_box"),'定时器')

        timer = setInterval(function () {
            if(num===parent.document.getElementById("iframe_box").children.length){
                refreshTime=refreshTime-1
                timeValue.html(refreshTime)
                if(refreshTime===0){
                    //此处调取实时数据方法
                    refreshJQGrid()
                    refreshTime=15
                    timeValue.html(refreshTime)
                }
                else {
                    timeValue.html(refreshTime)
                }
            }
            else {
                clearInterval(timer)
            }

        },1000)
    }

    var keyword = '';
    $(function () {


        timeValue.html(15)
        var height= $('#monitoring-height').height()
        var pheight= $('#monitoring-height').height()
        console.log(height)
        var fixedHeight=height+75
        $('#fixed-height').css("top",fixedHeight+'px')
        $('#fixed-height').css("margin-top",12+'px')
        // let fixedH=fixedHeight+'px'
        // $('#fixed-height').css("height","calc(100%" -fixedH)
        setTime()
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#monitoringJQGrid").jqGrid({
            height: 434,
            width:'100%',
            loadtext: "数据刷新中",
            autowidth:true,
            autoScroll: false,
            shrinkToFit: true, /*  autoScroll: false, *//*forceFit: true, */
            colNames: ["主键", "队列名称", "坐席数量", "空闲中的量", "振铃中的量", "通话中的量", "排队中的量",
                "进线量", "接听量", "未接听量", "接听率",
                "排队放弃量",  `总通话时长(s)`, `平均通话时长(s)`],
            colModel: [
                {name: "business_id", index: "business_id", key: true, hidden: true},
                {
                    name: "queueName",
                    index: "queueName",
                    width:100,
                    align: "left",
                    editable: true,
                    editrules: {required: true}
                },
                {name: "queueNumber", index: "queueNumber",width:100, align: "left"},
                {name: "nowFreeCount", index: "nowFreeCount",width:"100", align: "left"},
                {name: "nowVibrationCount", index: "nowVibrationCount",width:"100", align: "left", editable: true},
                {name: "nowListeningCount", index: "nowListeningCount", width:"100%",align: "left", hidden: false},
                {name: "nowQueueCount", index: "nowQueueCount", align: "left", width:"100%",hidden: false},
                {name: "enterCount", index: "enterCount", align: "left",width:"100%", hidden: false},
                {name: "listeningCount", index: "listeningCount", width:"100%", align: "left"},
                {name: "notListeningCount", index: "notListeningCount", width:"100%",align: "left"},
                {name: "listeningRate", index: "listeningRate", width:"100%", align: "left"},
                {name: "queueGiveUpCount", index: "queueGiveUpCount",width: "100%", align: "left"},
                {name: "dayBillesc", index: "dayBillesc",width: "100",align: "left"},
                {name: "dayAvgBillesc", index: "dayAvgBillesc",width: "100", align: "left"},
            ],
            viewrecords: false,
            sortable: false,
            multiselect: false,
            sortname: 'duration',
            hidegrid: false,
            url: "<%=basePath%>/realTimeMonitoring/reload.do",
            datatype: 'json',
            mtype: "POST",
            rownumbers: true,
            rownumWidth: 40,
            rowNum: 9999,
            jsonReader: {
                root: "queueMonitorings", id: "id"
            },
            loadComplete: function (data) {
                //实时监控数据
                var monitoringInfo=data.realTimeMonitoring
                console.log(monitoringInfo)
                //呼入中
                $("#currentIncomingCalls").html(monitoringInfo.currentIncomingCalls)
                //机器人接听
                $("#currentRobotListening").html(monitoringInfo.currentRobotListening)
                //机器人等待
                $("#currentRobotWaiting").html(monitoringInfo.currentRobotWaiting)
                //人工接听
                $("#currentSeatListening").html(monitoringInfo.currentSeatListening)
                //人工接听等待
                $("#currentSeatWaiting").html(monitoringInfo.currentSeatWaiting)
                $("#dailyTrafficVolume").html(monitoringInfo.dailyTrafficVolume)
                $("#seatsEnteringTheLine").html(monitoringInfo.seatsEnteringTheLine)
                $("#seatsListeningRate").html(monitoringInfo.seatsListeningRate?monitoringInfo.seatsListeningRate:'-')
                $("#seatsListeningTheLine").html(monitoringInfo.seatsListeningTheLine)
                // 自动调整高度
                var resCount = data.records;
                var tableHeight = resCount * 30 + 40;
                $("#gbox_monitoringJQGrid .ui-jqgrid-bdiv").css(
                    "cssText",
                    "height: " + tableHeight + "px!important;");
                $("#gbox_monitoringJQGrid2 .ui-jqgrid-bdiv").css(
                    "cssText",
                    "height: " + tableHeight + "px!important;");
                //生成人工监控数据
                var dataInfo=data.seatingDimensions
                $("#monitoringJQGrid2").jqGrid().clearGridData(['clearfooter']);
                dataInfo.forEach(res=>{
                    $("#monitoringJQGrid2").jqGrid('addRowData', res.id, res);
                })


            },
            gridComplete: function () {         // 数据加载完成后 添加 采购按钮
                $("#monitoringJQGrid").jqGrid('setLabel', 'rn', '序号', {
                    'text-align': 'center',
                    'font-size': '12px'
                }, '');

            },
            beforeSelectRow: function (rowid, e) {
                var $myGrid = $(this),
                    i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
                    cm = $myGrid.jqGrid('getGridParam', 'colModel');
                return (cm[i].name != 'edit');

            },
            ondblClickRow: function (id) {

            },
            <%--editurl: "<%=basePath %>/business/businessEdit.do"--%>

        });
        $("#monitoringJQGrid2").jqGrid({

            height:434,
            width:'100%',
            autowidth:true,
            autoScroll: false,
            shrinkToFit: true, /*  autoScroll: false, *//*forceFit: true, */
            colNames: [ "坐席分机", "所属队列","分机状态", "进线量", "接听量","未接听量",  "接听率",
                `总通话时长(s)`, `平均通话时长(s)`],
            colModel: [
                {name: "id", index: "id", key: true,width: "100%", hidden: false},
                {name: "queueName", index: "queueName",width: "100%", align: "left"},
                {name: "status",width: "100%", index: "status", align: "left"},
                // {name: "seatNumberCount", index: "seatNumberCount",width:"100%", align: "left"},
                {name: "incomingLine", index: "incomingLine", width: "100%",align: "left" },
                {name: "listening", index: "call_time",width: "100%", align: "left", },
                {name: "noListening", index: "noListening",width: "100%", align: "left"},
                {name: "listeningRate", index: "listeningRate", width: "100%", align: "left"},
                {name: "billsec", index: "billsec",  align: "left"},
                {name: "avgBillsec", index: "avgBillsec",align: "left"}

            ],
            // pager: "#monitoringJQGridPager2",
            viewrecords:false,
            hidegrid:false,
            multiselect: false,
            datatype:'local',
            pgbuttons: false,
            rownumbers: true,
            rownumWidth: 40,
            rowNum: 9999,
            jsonReader: {
                root: "root",//   很重要 定义了 后台分页参数的名字。
                id : "id"
            },
            loadComplete: function (data) {
                // 自动调整高度
                var resCount = data.records;
                var tableHeight = resCount * 30 + 40;
                // $("#gbox_monitoringJQGrid2 .ui-jqgrid-bdiv").css(
                //     "cssText",
                //     "height: " + tableHeight + "px!important;");
            },
            gridComplete: function () {         // 数据加载完成后 添加 采购按钮
                $("#monitoringJQGrid2").jqGrid('setLabel', 'rn', '序号', {
                    'text-align': 'center',
                    'font-size': '12px',

                }, '');

            },
            beforeSelectRow: function (rowid, e) {

            },
            ondblClickRow: function (id) {

            },


        });

    });

    /******************************方法声明**********************************/
    /**
     * 刷新表格数据
     */
    function refreshJQGrid() {
        var postData = {};

        $("#monitoringJQGrid").jqGrid("setGridParam", {
            url: "<%=basePath %>/realTimeMonitoring/reload.do",
            mtype: 'POST',
            datatype: "json",
            postData: postData
        }).trigger("reloadGrid");
    }
</script>






</body>

</html>
